<div id="graph">Loading graph...</div>

<script type="text/javascript">
	var myChart = new JSChart('graph', 'line');
	var viewTimes = '{$viewTimes}'.split(",");
	var line1 = new Array();
	for(var i=0; i<viewTimes.length; i++) {
		line1.push([i+1,parseInt(viewTimes[i])]);		
	}
	myChart.setDataArray(line1, 'blue');
	
	var viewIps = '{$viewIps}'.split(',');
	var line2 = new Array();
	for(var i=0; i<viewIps.length;i++){
		line2.push([i+1,parseInt(viewIps[i])]);
	}
	myChart.setDataArray(line2, 'red');
	
	//myChart.setDataArray([[1, 80],[2, 40],[3, 60],[4, 65],[5, 50],[6, 50],[7, 60],[8, 80],[9, 150],[10, 100]], 'blue');
	//myChart.setDataArray([[1, 100],[2, 55],[3, 80],[4, 115],[5, 80],[6, 70],[7, 30],[8, 130],[9, 160],[10, 170]], 'green');
	
	var maxTimes = parseInt('{$max}');
	
	myChart.setAxisPaddingBottom(40);
	myChart.setTextPaddingBottom(5);
	
	myChart.setAxisValuesNumberY(maxTimes+4);
	
	myChart.setIntervalStartY(0);
	myChart.setIntervalEndY(maxTimes+3);
	
	//myChart.setLabelX([1,'2013-10-01']);
	//myChart.setLabelX([2,'2013-10-02']);
	
	var xLine = '{$xLine}'.split(",");
	
	for(var i=0; i<xLine.length;i++) {
		myChart.setLabelX([i+1, xLine[i]]);
	}

	var xNum = parseInt('{$xNum}');
	myChart.setAxisValuesNumberX(xNum);
	
	for(var i=1;i<=xNum;i++) {
		myChart.setTooltip([i]);
	}
	
	myChart.setShowXValues(false);
	myChart.setTitleColor('#454545');
	myChart.setAxisValuesColor('#454545');
	myChart.setLineColor('#ff0000', 'red');
	
	myChart.setFlagColor('#9D16FC');
	myChart.setFlagRadius(4);
	myChart.setBackgroundImage('chart_bg.jpg');
	myChart.setSize(800, 400);
	myChart.draw();
</script>